<!DOCTYPE html>
<html lang="en">

<head>
    {include file="common/meta_new" /}
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> -->
    
</head>

<body class="F6">
    <div id="app" class="invite-page">
        <!-- header -->
        <div class="header">
            <div class="header-height"></div>
            <div class="header-wrap">
                <div class="header-content">
                    <div class="left">
                        <div class="go-back" url="/"><img src="/static/images/go-back.png" alt=""></div>
                        <div class="text">邀请好友</div>
                    </div>
                    <div class="title"></div>
                </div>
            </div>
        </div>
        <!-- 顶部 -->
        <div class="top-wrap">
            <div class="invite-bg1">
                <img src="/static/images/invite-bg1.png" alt="">
            </div>
            <div class="sph">
                <!-- <div class="title">微创联盟优选</div>
                 -->
                <img src="/static/images/share_title.png" alt="">
                <!-- <img src="/static/images/sph.png" alt=""> -->
            </div>
            <div class="text">8个月挑战在微信橱窗赚取100万</div>
        </div>
        <!-- 中间 -->
        <div class="middle-wrap" id="middle-wrap">
            <div class="invite-bg2">
                <img src="/static/images/invite-bg2.png" alt="">
            </div>
            <div class="content">
                <div class="top-box">
                    <!-- 轮播 -->
                    <div class="carousel-container" id="carousel1">
                        <div class="carousel-wrapper">
                            {volist name="share_cover_list" id="vo"}
                            <a href="#" class="carousel-item">
                                <img src="{$vo}" alt="">
                            </a>
                            {/volist}
                        </div>
                        <div class="carousel-dots"></div>
                    </div>
                    <a href="javascript:toLeft();" class="to-left" id="to_left"><img src="/static/images/to-left.png"
                            alt=""></a>
                    <a href="javascript:toRight();" class="to-right" id="to_right"><img
                            src="/static/images/to-right.png" alt=""></a>
                </div>
                <div class="bottom-box">
                    <div class="left">
                        <img src="/qrcode/build?text={$share_url}&logo=1" alt="">
                    </div>
                    <div class="right">
                        <div class="user-box">
                            <div class="avatar">
                                <img src="{$user.avatar}" alt="">
                            </div>
                            <div class="nickname-box">
                                <div class="nickname ellipsis-1" style=" padding-bottom: 5px" >{$user.nickname}</div>
                                <div class="tag-name">
                                    {$user.expert_level|doExpertLevel}
                                </div>
                            </div>
                        </div>
                        <div class="share-code">分享码：{$user.unique_id}</div>
                        <div class="tips">邀请您加入百万橱窗达人计划</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="click-tips">点击替换<span class="blue">上传</span>自己的推广图片</div> -->
        <!-- 底部按钮 -->
        <div class="btn-list">
            <input type="hidden" id="share_link" value="{$share_url2}" />
            <div class="left-btn btn-share-link" data-clipboard-target="#share_link">分享邀请链接</div>
            <div class="right-btn btn-save-pic">保存为图片</div>
        </div>
        <!-- 预测弹窗 -->
        <div class="share-popup">
            <div class="poster">
                <div class="poster-tips" style="margin-top: 30px" >
                </div>
                <div class="poster_pic">
                    <img id="share_pic" title="share" name="share_pic" class="poseter-img" src="">
                </div>
                <div class="poster-tips">
                    请长按图片保存
                </div>
            </div>
        </div>
        <!-- <div class="popup-content" style="display:none">
            <div class="title">分享当前海报到</div>
            <div class="middle">
                <div class="left">
                    <div class="img"><img src="/static/images/wx.png" alt=""></div>
                    <div class="text">微信好友</div>
                </div>
                <div class="right">
                    <div class="img"><img src="/static/images/pyq.png" alt=""></div>
                    <div class="text">朋友圈</div>
                </div>
            </div>
            <div class="cancel-btn" onclick="hidePopup()">取消</div>
        </div> -->
    </div>
    <script src="/static/js/layer/layer.js"></script>
    <script src="/static/js/html2canvas.js?v=88"></script>
    <script src="/static/js/clipboard.js"></script>
    <script src="/static/js/common.js"></script>
    <script src="/static/js/share/index.js?v=2024122244555"></script>

    <script>
        const carousel = new Carousel('carousel1', 86400);
        function toLeft() {
            carousel.showPreviousSlide()
        }
        function toRight() {
            carousel.showNextSlide()
        }
        // function showSharePopup() {
        //     document.querySelector('.popup').style.display = 'block'
        //     document.querySelector('.popup-content').style.display = 'block'
        //     document.querySelector('body').style.overflow = 'hidden'
        // }
        // function hidePopup() {
        //     document.querySelector('.popup').style.display = 'none'
        //     document.querySelector('.popup-content').style.display = 'none'
        //     document.querySelector('body').style.overflow = 'visible';
        // }

    </script>
</body>

</html>